<template>
    <div style="background-color: #f5f5f5;">
        <h2 style="text-align: center;">代缴订单详情</h2>
        <table border="1" style="width: 100%;height: auto; border-collapse: collapse;text-align: center;height: 200px;" >
        <tr>
            <td>流水号</td>
            <td>{{payDetail.id}}</td>
            <td>账单编号</td>
            <td>{{payDetail.serialNumber}}</td>
        </tr>
        <tr>
            <td>所属房屋</td>
            <td>{{payDetail.houseName}}</td>
            <td>账单类目</td>
            <td>{{payDetail.itemBil==1?"代缴电费":payDetail.itemBil==2?"代缴水费":payDetail.itemBil==3?"物业费":payDetail.itemBil==4?"卫生费":"车位费"}}</td>
        </tr>
        <tr>
            <td>计费周期</td>
            <td>{{payDetail.chargingcyclestart.substr(0,10).replaceAll("-","")}}--{{payDetail.chargingcycleEnd.substr(0,10).replaceAll("-","")}}</td>
            <td>应收金额</td>
            <td>￥{{payDetail.amountReceivable.toFixed(2)}}</td>
        </tr>
        <tr>
            <td>应收时间</td>
            <td>{{payDetail.receivableTime.substr(0,10).replaceAll("-","")}}</td>
            <td>账单状态</td>
            <td>{{payDetail.billingStatus==1?"未支付":"已支付"}}</td>
        </tr>
    </table>
    </div>
    
   
</template>
<script lang="ts" setup>
import { ref,reactive } from "vue";
import{ getpayDetails } from "/@/api/payfess/payFess";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();


//待缴详情
const payDetail = reactive({
      "id": 0,
      "serialNumber": "",
      "billNumber": "",
      "itemBil": 0,
      "chargingcyclestart": "",
      "chargingcycleEnd": "",
      "amountReceivable": 0,
      "receivableTime": "",
      "billingStatus": 1,
      "houseId": 0,
      "houseName": "",
})
//订单缴费详情
const getpayDetaill = async () => {
    var res = await getpayDetails(route.query.pid);
    console.log(res.data.result);
    payDetail.id = res.data.result[0].id;
    payDetail.serialNumber = res.data.result[0].serialNumber;
    payDetail.billNumber = res.data.result[0].billNumber;
    payDetail.houseName = res.data.result[0].houseName;
    payDetail.itemBil = res.data.result[0].itemBil;
    payDetail.chargingcyclestart = res.data.result[0].chargingcyclestart;
    payDetail.chargingcycleEnd = res.data.result[0].chargingcycleEnd;
    payDetail.amountReceivable = res.data.result[0].amountReceivable;
    payDetail.receivableTime = res.data.result[0].receivableTime;
    payDetail.billingStatus = res.data.result[0].billingStatus;


}

getpayDetaill();

</script>